<template>
  <div class="prict-table-detail-box">
    <div class="offer-type-sum" v-if="priceDetailInfo.isBuildPrice">
      <el-row :class="'table-box'">
        <ul class="table-body service-table-body">
          <li class="tr tbody">
            <span class="td project"> 报价模式： </span>
            <span class="td price"> 打包报价 </span>
          </li>
          <li class="tr tbody">
            <span class="td project"> 总计(元)： </span>
            <span class="td price">
              <span class="font-bold">
                {{ priceDetailInfo.priceTable.sumCount.sum }}</span
              >
              <span class=""></span>
            </span>
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    priceDetailInfo: {
      type: [Object, Array],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  beforeMount() {
    console.log("报价信息有吗？");
    console.log(this.priceDetailInfo);
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.prict-table-detail-box {
  text-align: center;
  > div {
    padding: 0 20px 10px;
    background: #fff;
    border-radius: 6px;
    .ex-box {
      .el-button {
        width: 200px;
      }
      p {
        padding-top: 20px;
      }
    }
  }

  .table-sub-title {
    width: 100%;
    display: inline-block;
    font-size: 14px;
    color: #fc9153;
    font-weight: bold;
    border-left: 4px solid #fc9153;
    text-indent: 8px;
    margin-bottom: 15px;
    height: 16px;
    line-height: 16px;
    text-align: left;
    margin-top: 15px;
  }
  .offer-type-sum {
    margin-top: 15px;
    .tr {
      .project {
        text-align: right;
        padding-right: 15px;
        width: 13%;
      }
      .price {
        text-align: left;
        padding-left: 15px;
        color: #fc9153;
      }
      .font-bold {
        font-weight: bold;
      }
    }
  }
  .ex-item-box {
    margin-bottom: 10px;
    span {
      display: inline-block;
      float: left;
      font-size: 14px;
    }
    .ex-tip {
      width: 6%;
      text-align: left;
    }
    .ex-txt {
      width: 93%;
      text-align: left;
    }
  }
  .base-table-head,
  .base-table-body {
    .price {
      width: 32%;
    }
    .ex {
      width: 40% !important;
    }
  }

  .service-table-body,
  .sum-table-body {
    border-top: 1px solid #ebeae6 !important;
    .tr {
      .project {
        width: 11%;
        text-align: center;
        text-align: right;
      }
      .ex {
        width: 56%;
      }
    }
  }
  .sum-table-body {
    width: 99.8%;
    position: relative;
    .tr.sum {
      border-bottom: none;
      .sum-txt {
        width: 26%;
      }
      .sum-prict {
        padding-left: 20px;
      }
    }
    .sum-table-btn-box {
      position: absolute;
      right: -82px;
      top: 0px;
      .sum-table-btn {
        width: 70px;
        height: 30px;
      }
    }
  }

  .color-icon {
    color: #ff0000;
    margin-right: 2px;
  }
}

.table-box {
  width: 100%;
  .table-head {
    background-color: #fcfcfc;
    border: 1px solid #ebeae6;
    border-bottom: none !important;
    text-align: center;
  }
  .table-body {
    border: 1px solid #ebeae6;
    border-top: none;
    text-align: center;
  }
  .tr {
    color: #636363;
    font-size: 13px;
    border-bottom: 1px solid #ebeae6;
    height: 30px;
  }
  .th,
  .td {
    border-left: 1px solid #ebeae6;
    height: 30px;
    line-height: 30px;
    float: left;
  }
  .th:first-child,
  .td:first-child {
    border-left: none;
  }
  .tbody.tr:last-child {
    border-bottom: none;
  }
  .th {
    font-weight: 600;
  }
  .td {
    .el-input__inner {
      height: 30px;
      border: none;
      text-align: center;
    }
  }
  span {
    display: inline-block;
  }
  .num {
    width: 10%;
  }
  .project {
    width: 16%;
  }
  .radix {
    width: 14%;
  }
  .scale {
    width: 18%;
  }
  .price {
    width: 14%;
  }
  .ex {
    width: 24%;
  }
  .sum-txt {
    width: 58.3%;
    font-size: 13px;
    font-weight: 600;
  }
}
</style>
